<!--回到顶部-->
<template>
  <div class="toTop" v-show="show">
    <div class="toTop-frame ac-bg" @click="clickToTop">
      <van-icon name="back-top" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      scrollTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.pageScroll);
  },
  methods: {
    pageScroll() {
      var scrollTop = window.scrollY; //滚动距离
      this.scrollTop = scrollTop;
      if (scrollTop > 100) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    //回到顶部
    clickToTop() {
      let scrollTop = document.documentElement.scrollTop;
      let offset = scrollTop / 12;
      let timer = setInterval(() => {
        scrollTop = scrollTop - offset;
        document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
        if (scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.toTop-frame {
  cursor: pointer;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  clear: both;
  z-index: 100;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1.2rem;
  color: #727272;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #dcdcdc;
}
.toTop-frame:active {
  background: rgba(0, 0, 0, 0.5);
}
</style>